<template>
  <div class="list">
    <div  
    v-for="item in list" 
    :key="item.title"
    :class="['list-item',{ active: item.checked }]"
    >
        <img :src="item.src" alt="">
        <h3>{{ item.title }}</h3>
        <p>{{ item.price }}</p>
        <button>Add to cart</button>
        <span @click="$emit('change',item.title)">
            {{ item.checked ? '✅' : '+' }}
        </span>
    </div>
  </div>
</template>

<script>
export default {
    props:['list']
}
</script>



<style lang="scss" scoped>
.list {
  width: 1000px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
}
.list-item {
  background: #242529;
  margin: 10px;
  width: calc(100% / 4 - 20px);
  height: 300px;
  color: #cecece;
  text-align: center;
  padding: 20px;
  position: relative;
  span {
    position: absolute;
    top: 15px;
    right: 15px;
    cursor: pointer;
    font-size: 20px;
  }
  img {
    width: 120px;
    height: 120px;
  }
  h3 {
    height: 60px;
  }
  button {
    margin-top: 10px;
    width: 80px;
    height: 30px;
  }
  &.active {
    border: 1px solid #484ec0;
  }
}
</style>